<template>
  <div v-show="false" class="print-bill">
    <div style="margin: 20px; color: #000; font-weight: bold; font-family: 'Microsoft YaHei'">
      <h1 style="text-align: center">采购单</h1>
      <div class="bill-info">
        <div class="info-item">供应商：{{ checkData.supplierName }}</div>
        <div style="display: flex; width: max-content">
          <!-- <div class="erp-mr-10">订单编号：{{ checkData.purchaseOrderCode }}</div> -->
          <div class="erp-mr-10">采购日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
          <div>
            采购交货日期：{{
              checkData.deliveryDate ? dayjs(checkData.deliveryDate).format('YYYY年M月DD日') : ''
            }}
          </div>
        </div>
      </div>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr style="line-height: 35px">
          <td width="100" class="table-cell">序号</td>
          <td width="150" class="table-cell">名称</td>
          <td width="100" class="table-cell">规格</td>
          <td width="150" class="table-cell">单位</td>
          <td width="150" class="table-cell">数量</td>
          <td width="150" class="table-cell">单价</td>
          <td width="150" class="table-cell">金额</td>
          <td width="150" class="table-cell">含税</td>
        </tr>
        <tr v-for="(item, index) in checkData.detailList" :key="index" style="line-height: 35px">
          <td width="100" class="table-cell">{{ index + 1 }}</td>
          <td width="150" class="table-cell">{{ item.productName }}</td>
          <td width="100" class="table-cell">{{ item.specModel }}</td>
          <td width="150" class="table-cell">{{ item.unit }}</td>
          <td width="150" class="table-cell">{{ item.qty }}</td>
          <td width="150" class="table-cell">{{ item.unitPrice }}</td>
          <td width="150" class="table-cell">
            {{ `¥${formatPrice(decimalRound(item.qty! * item.unitPrice!, 4))}` }}
          </td>
          <td width="150" class="table-cell">{{ checkData.isInclTax ? '含税' : '不含税' }}</td>
        </tr>
      </table>
      <div class="company-info">
        <div></div>
        <div>
          <div>{{ userStore.tenantName }}</div>
          <div>联系人：{{ userStore.userName }}</div>
          <div>联系电话：{{ userStore.phoneNumber }}</div>
          <div>日期：{{ dayjs().format('YYYY年M月DD日') }}</div>
        </div>
      </div>
      <div class="remark">注：{{ checkData.remark }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PurchaseResItem } from '@renderer/api/purchasingDep'
import { useUserStore } from '@renderer/store'
import dayjs from 'dayjs'
import { formatPrice, decimalRound } from '@renderer/utils/mixins'

interface Props {
  checkData: PurchaseResItem
}
withDefaults(defineProps<Props>(), {
  checkData: () => {
    return {
      inboundStatus: 0,
      purchaseOrderId: '',
      purchaseOrderCode: '',
      supplierId: '',
      deliveryDate: '',
      supplierName: '',
      supplierAddress: '',
      contactName: '',
      contactPhone: '',
      purchaseAmt: 0,
      isInclTax: 0,
      formType: 0,
      detailList: [],
      createdBy: '',
      createdDt: '',
      updatedBy: '',
      updatedDt: '',
      remark: ''
    }
  }
})
const userStore = useUserStore().localUserInfo

//打印详情
const printInfo = () => {
  const element = document.createElement('div')
  element.innerHTML = (document as any).querySelector('.print-bill').innerHTML
  document.body.appendChild(element)
  ;(document as any).querySelector('#app').style.display = 'none'
  window.onafterprint = () => {
    ;(document as any).querySelector('#app').style.display = 'block'
    document.body.removeChild(element)
  }
  window.print()
}
defineExpose({ printInfo })
</script>
<style scoped lang="less">
.bill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
  .info-item {
    flex: 1;
  }
}
.table-cell {
  text-align: center;
  font-size: 12px;
}
.remark {
  height: 50px;
  display: flex;
  align-items: center;
}
.company-info {
  display: flex;
  padding: 0px 20px;
  margin-top: 10px;
  justify-content: space-between;
  width: 100%;
}
</style>
